<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-07-25 10:27:11
 * @LastEditTime: 2024-07-25 16:50:35
 * @FilePath: \project\src\views\screen\components\chinaMap\index.vue
-->
<template>
  <div class="map">
    <p class="title">景区实时客流量</p>
    <div ref="charts" class="charts"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

// 引入echarts
import * as echarts from 'echarts';
import chinaJson from '../../assets/china.json'
echarts.registerMap('china', chinaJson)
// 获取echarts节点
let charts = ref()
onMounted(()=> {
  // 页面加载获取echarts类的实例
  let myCharts = echarts.init(charts.value)
  const datas = [
    {
      fromName: "北京",
      toName: "上海",
      coords: [
        [116.4551, 40.2539],
        [121.4648, 31.2891]
      ]
    },
    {
      fromName: "上海",
      toName: "北京",
      coords: [
        [121.4648, 31.2891],
        [116.4551, 40.2539]
      ]
    },
    {
      fromName: "北京",
      toName: "广州",
      coords: [
        [116.4551, 40.2539],
        [113.5107, 23.2196]
      ]
    },
    {
      fromName: "广州",
      toName: "北京",
      coords: [
        [113.5107, 23.2196],
        [116.4551, 40.2539]
      ]
    },
    {
      fromName: "北京",
      toName: "成都",
      coords: [
        [116.4551, 40.2539],
        [103.9526, 30.7617]
      ]
    },
    {
      fromName: "成都",
      toName: "北京",
      coords: [
        [103.9526, 30.7617],
        [116.4551, 40.2539]
      ]
    },
    {
      fromName: "成都",
      toName: "新疆维吾尔自治区",
      coords: [
        [103.9526, 30.7617],
        [85.294711, 41.371801]
      ]
    },
    {
      fromName: " 新疆维吾尔自治区",
      toName: "成都",
      coords: [
        [85.294711, 41.371801],
        [103.9526, 30.7617]
      ]
    }
  ]
  const planePath: string = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
  
  let options = {
    tooltip: {
      trigger: "item"
    },
    grid: {
      left: "0px",
      right: "80px",
      top: "10px",
      bottom: "10px"
    },
    geo: { // 地图设置
      map: 'china',
      roam: true,
      top: 140,
      left: 'center',
      zoom: 1.4, // 等比例缩放
      label: {
        color: "#fff",
        show: true
      },
      emphasis: { // 选中之后的颜色
        label: {
          color: "#fff",
          show: true
        },
        itemStyle: {
          areaColor: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#073684" },
              { offset: 1, color: "#2B91B7" }
            ]
          }
        },
      },
      itemStyle: { // 地图板块的颜色
        areaColor: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#073684" },
            { offset: 1, color: "#061E3D" }
          ]
        },
        borderColor: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: "#00F6FF" },
            { offset: 1, color: "#87ADCB" }
          ],
          false
        ),
        tooltip: {
          show: false
        }
      },
    },
    series: [ // 航线图
      {
        name: "",
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          color: "red",
          symbolSize: 3
        },
        lineStyle: {
          color: "#fff",
          width: 0,
          curveness: 0.2
        },
        data: datas
      },
      {
        name: "",
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 2,
        symbol: ["none", "arrow"],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: planePath, // 飞机图标
          symbolSize: 15
        },
        lineStyle: {
          color: "#fff",
          width: 1,
          opacity: 0.6,
          curveness: 0.2
        },
        data:datas
      }
    ]
  }
  // 设置实例的配置项
  myCharts.setOption(options)
})
</script>

<style lang="scss" scoped>
.map{
  .title{
    height: 25px;
    width: 270px;
    line-height: 25px;
    font-size: 16px;
    padding-left: 30px;
    letter-spacing: 5px;
    background: url('../../images/map-title-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .charts{
    width: 100%;
    height: 100%;
  }
}
</style>